Frontend Monorepo: Zarządzanie Przestrzenią Roboczą Lerna i Nx

W ciągle ewoluującym krajobrazie rozwoju frontendowego, zarządzanie dużymi i złożonymi projektami może stanowić znaczące wyzwanie. Tradycyjne konfiguracje z wieloma repozytoriami, choć oferują izolację, mogą prowadzić do powielania kodu, problemów z zarządzaniem zależnościami i niespójnych narzędzi. Właśnie tutaj architektura monorepo błyszczy. Monorepo to pojedyncze repozytorium zawierające wiele projektów, często powiązanych, które są budowane i wersjonowane razem. Takie podejście oferuje wiele korzyści, ale efektywne zarządzanie monorepo wymaga specjalistycznych narzędzi. Ten artykuł omawia dwa popularne rozwiązania: Lerna i Nx.

Co to jest Monorepo?

Monorepo to repozytorium systemu kontroli wersji, które zawiera kod wielu projektów. Projekty te mogą być powiązane lub całkowicie niezależne. Kluczowe jest to, że dzielą one to samo repozytorium. Firmy takie jak Google, Facebook, Microsoft i Uber z powodzeniem przyjęły monorepo do zarządzania swoimi ogromnymi bazami kodu. Pomyśl o Google przechowującym prawie cały swój kod, w tym Androida, Chrome i Gmail, w jednym repozytorium.

Korzyści z Monorepo

• Współdzielenie i ponowne wykorzystanie kodu: Łatwo udostępniaj kod między projektami bez skomplikowanych przepływów pracy związanych z pakowaniem i publikacją. Wyobraź sobie bibliotekę systemu projektowania, która może być bezproblemowo zintegrowana z wieloma aplikacjami w tym samym repozytorium.
• Uproszczone zarządzanie zależnościami: Zarządzaj zależnościami w jednym miejscu, zapewniając spójność we wszystkich projektach. Aktualizacja zależności współdzielonej biblioteki automatycznie aktualizuje wszystkie projekty, które od niej zależą.
• Atomowe zmiany: Wprowadzaj zmiany obejmujące wiele projektów w jednym commicie, zapewniając spójność i upraszczając testowanie. Na przykład, refaktoryzacja, która dotyczy zarówno frontendu, jak i backendu, może zostać przeprowadzona atomowo.
• Poprawiona współpraca: Zespoły mogą łatwo współpracować nad różnymi projektami w tym samym repozytorium, promując dzielenie się wiedzą i rozwój międzyfunkcyjny. Deweloperzy mogą łatwo przeglądać i rozumieć kod różnych zespołów.
• Spójne narzędzia i praktyki: Wymuszaj spójne standardy kodowania, zasady lintowania i procesy budowania we wszystkich projektach. Poprawia to jakość kodu i łatwość jego utrzymania.
• Uproszczony refaktoring: Duże projekty refaktoryzacyjne są uproszczone, ponieważ cały powiązany kod znajduje się w tym samym repozytorium. Zautomatyzowane narzędzia do refaktoryzacji mogą być używane w całej bazie kodu.

Wyzwania Monorepo

• Rozmiar repozytorium: Monorepo mogą stać się bardzo duże, potencjalnie spowalniając operacje klonowania i indeksowania. Narzędzia takie jak `git sparse-checkout` i `partial clone` mogą pomóc złagodzić ten problem.
• Czasy kompilacji: Kompilacja całego monorepo może być czasochłonna, szczególnie w przypadku dużych projektów. Narzędzia takie jak Lerna i Nx oferują zoptymalizowane procesy kompilacji, aby temu zaradzić.
• Kontrola dostępu: Ograniczanie dostępu do określonych części monorepo może być złożone. Wymaga to starannego planowania i wdrożenia mechanizmów kontroli dostępu.
• Złożoność narzędzi: Konfiguracja i zarządzanie monorepo wymaga specjalistycznych narzędzi i wiedzy. Krzywa uczenia się może być początkowo stroma.

Lerna: Zarządzanie Projektami JavaScript w Monorepo

Lerna to popularne narzędzie do zarządzania projektami JavaScript w monorepo. Optymalizuje ono przepływ pracy związany z zarządzaniem repozytoriami wielopakietowymi z użyciem Git i npm. Jest szczególnie odpowiednie dla projektów korzystających z npm lub Yarn do zarządzania zależnościami.

Kluczowe funkcje Lerna

• Zarządzanie wersjonowaniem: Lerna może automatycznie wersjonować i publikować pakiety na podstawie zmian wprowadzonych od ostatniego wydania. Wykorzystuje konwencjonalne commity do określenia następnego numeru wersji.
• Zarządzanie zależnościami: Lerna obsługuje zależności między pakietami, zapewniając, że pakiety w monorepo mogą od siebie zależeć. Wykorzystuje symlinki do tworzenia lokalnych zależności.
• Wykonywanie zadań: Lerna może wykonywać polecenia w wielu pakietach równolegle, przyspieszając procesy budowania i testowania. Obsługuje uruchamianie skryptów zdefiniowanych w `package.json`.
• Wykrywanie zmian: Lerna może wykrywać, które pakiety uległy zmianie od ostatniego wydania, umożliwiając ukierunkowane kompilacje i wdrożenia.

Przykład użycia Lerna

Zilustrujmy użycie Lerna prostym przykładem. Załóżmy, że mamy monorepo z dwoma pakietami: `package-a` i `package-b`. `package-b` zależy od `package-a`.

monorepo/
├── lerna.json
├── package.json
├── packages/
│   ├── package-a/
│   │   ├── package.json
│   │   └── index.js
│   └── package-b/
│       ├── package.json
│       └── index.js

1. Inicjalizacja Lerna:

lerna init

Tworzy to `lerna.json` i aktualizuje główny `package.json`. Plik `lerna.json` konfiguruje zachowanie Lerna.

2. Instalacja zależności:

npm install
# lub
yarn install

Instaluje to zależności dla wszystkich pakietów w monorepo, na podstawie plików `package.json` w każdym pakiecie.

3. Uruchomienie polecenia w pakietach:

lerna run test

To wykonuje skrypt `test` zdefiniowany w plikach `package.json` wszystkich pakietów, które go posiadają.

4. Publikacja pakietów:

lerna publish

To polecenie analizuje historię commitów, określa, które pakiety uległy zmianie, podnosi ich wersje na podstawie konwencjonalnych commitów i publikuje je do npm (lub wybranego rejestru).

Konfiguracja Lerna

Plik `lerna.json` jest sercem konfiguracji Lerna. Pozwala on na dostosowanie zachowania Lerna, na przykład:

• `packages`: Określa lokalizację pakietów w monorepo. Często ustawiane na `["packages/*"]`.
• `version`: Określa strategię wersjonowania. Może to być `independent` (każdy pakiet ma własną wersję) lub wersja stała.
• `command`: Pozwala na konfigurowanie opcji dla konkretnych poleceń Lerna, takich jak `publish` i `run`.

Przykład `lerna.json`:

{
  "packages": [
    "packages/*"
  ],
  "version": "independent",
  "npmClient": "npm",
  "useWorkspaces": true,
  "command": {
    "publish": {
      "conventionalCommits": true,
      "message": "chore(release): publish"
    }
  }
}

Nx: Inteligentny, Szybki i Rozszerzalny System Kompilacji

Nx to potężny system kompilacji, który zapewnia zaawansowane funkcje zarządzania monorepo. Koncentruje się na inkrementalnych kompilacjach, cachowaniu obliczeń i orkiestracji zadań, aby znacząco poprawić czasy kompilacji i produktywność programistów. Podczas gdy Lerna koncentruje się głównie na zarządzaniu pakietami, Nx zapewnia bardziej kompleksowe podejście do zarządzania całym przepływem pracy monorepo, w tym generowaniem kodu, lintowaniem, testowaniem i wdrażaniem.

Kluczowe funkcje Nx

• Inkrementalne kompilacje: Nx analizuje graf zależności Twoich projektów i odbudowuje tylko te projekty, które uległy zmianie od ostatniej kompilacji. Znacząco skraca to czasy kompilacji.
• Cachowanie obliczeń: Nx cachuje wyniki zadań, takich jak kompilacje i testy, dzięki czemu można je ponownie wykorzystać, jeśli dane wejściowe się nie zmieniły. Dalsze przyspiesza to cykle rozwoju.
• Orkiestracja zadań: Nx zapewnia potężny system orkiestracji zadań, który pozwala definiować złożone potoki kompilacji i efektywnie je wykonywać.
• Generowanie kodu: Nx zapewnia narzędzia do generowania kodu, które mogą pomóc w szybkim tworzeniu nowych projektów, komponentów i modułów, zgodnie z najlepszymi praktykami i spójnymi standardami.
• Ekosystem wtyczek: Nx posiada bogaty ekosystem wtyczek, który obsługuje różne technologie i frameworki, takie jak React, Angular, Node.js, NestJS i inne.
• Wizualizacja grafu zależności: Nx może wizualizować graf zależności Twojego monorepo, pomagając zrozumieć relacje między projektami i zidentyfikować potencjalne problemy.
• Polecenia `affected`: Nx dostarcza polecenia do uruchamiania zadań tylko na projektach, które są dotknięte przez konkretną zmianę. Pozwala to skupić wysiłki na obszarach wymagających uwagi.

Przykład użycia Nx

Zilustrujmy użycie Nx prostym przykładem. Stworzymy monorepo z aplikacją React i biblioteką Node.js.

1. Zainstaluj Nx CLI globalnie:

npm install -g create-nx-workspace

2. Utwórz nową przestrzeń roboczą Nx:

create-nx-workspace my-monorepo --preset=react
cd my-monorepo

To tworzy nową przestrzeń roboczą Nx z aplikacją React. Opcja `--preset=react` informuje Nx, aby zainicjował przestrzeń roboczą z konfiguracjami specyficznymi dla React.

3. Wygeneruj bibliotekę:

nx generate @nrwl/node:library my-library

To generuje nową bibliotekę Node.js o nazwie `my-library`. Nx automatycznie konfiguruje bibliotekę i jej zależności.

4. Skompiluj aplikację:

nx build my-app

To kompiluje aplikację React. Nx analizuje graf zależności i odbudowuje tylko niezbędne pliki.

5. Uruchom testy:

nx test my-app

To uruchamia testy jednostkowe dla aplikacji React. Nx cachuje wyniki testów, aby przyspieszyć kolejne uruchomienia.

6. Wyświetl graf zależności:

nx graph

To otwiera interfejs internetowy wizualizujący graf zależności monorepo.

Konfiguracja Nx

Nx jest konfigurowany za pomocą pliku `nx.json`, który znajduje się w głównym katalogu przestrzeni roboczej. Ten plik definiuje projekty w przestrzeni roboczej, ich zależności i zadania, które można na nich wykonać.

Kluczowe opcje konfiguracji w `nx.json` obejmują:

• `projects`: Definiuje projekty w przestrzeni roboczej i ich konfigurację, taką jak ich główny katalog i cele kompilacji.
• `tasksRunnerOptions`: Konfiguruje runner zadań, który jest odpowiedzialny za wykonywanie zadań i cachowanie ich wyników.
• `affected`: Konfiguruje sposób, w jaki Nx określa, które projekty są dotknięte zmianą.

Przykład `nx.json`:

{
  "npmScope": "my-org",
  "affected": {
    "defaultBase": "main"
  },
  "implicitDependencies": {
    "package.json": {
      "dependencies": "*",
      "devDependencies": "*"
    },
    ".eslintrc.json": "*"
  },
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx-cloud",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"],
        "accessToken": "...",
        "canTrackAnalytics": false,
        "showUsageWarnings": false
      }
    }
  },
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["production", "default"],
      "outputs": ["{projectRoot}/dist"]
    }
  },
  "namedInputs": {
    "default": ["{projectRoot}/**/*", "!{projectRoot}/dist/**/*", "!{projectRoot}/tmp/**/*"],
    "production": ["!{projectRoot}/**/*.spec.ts", "!{projectRoot}/**/*.spec.tsx", "!{projectRoot}/**/*.spec.js", "!{projectRoot}/**/*.spec.jsx"]
  },
  "generators": {
    "@nrwl/react": {
      "application": {
        "style": "css",
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "library": {
        "style": "css",
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "component": {
        "style": "css"
      }
    }
  }
}

Lerna vs. Nx: Który wybrać?

Zarówno Lerna, jak i Nx są doskonałymi narzędziami do zarządzania frontendowymi monorepo, ale odpowiadają nieco innym potrzebom. Oto porównanie, które pomoże Ci wybrać odpowiednie narzędzie dla Twojego projektu:

Cecha	Lerna	Nx
Skupienie	Zarządzanie Pakietami	System Kompilacji i Orkiestracja Zadań
Inkrementalne Kompilacje	Ograniczone (wymaga narzędzi zewnętrznych)	Wbudowane i wysoce zoptymalizowane
Cachowanie Obliczeń	Nie	Tak
Generowanie Kodu	Nie	Tak
Ekosystem Wtyczek	Ograniczony	Obszerny
Krzywa Uczenia	Niższa	Wyższa
Złożoność	Prostsze	Bardziej złożone
Przypadki Użycia	Projekty skoncentrowane głównie na zarządzaniu i publikacji pakietów npm.	Duże i złożone projekty wymagające zoptymalizowanych czasów kompilacji, generowania kodu i kompleksowego systemu kompilacji.

Wybierz Lerna, jeśli:

• Potrzebujesz głównie zarządzać i publikować pakiety npm.
• Twój projekt jest stosunkowo mały lub średniej wielkości.
• Preferujesz prostsze narzędzie z niższą krzywą uczenia.
• Jesteś już zaznajomiony z npm i Yarn.

Wybierz Nx, jeśli:

• Potrzebujesz zoptymalizowanych czasów kompilacji i inkrementalnych kompilacji.
• Potrzebujesz możliwości generowania kodu.
• Wymagasz kompleksowego systemu kompilacji z orkiestracją zadań.
• Twój projekt jest duży i złożony.
• Jesteś gotów zainwestować czas w naukę potężniejszego narzędzia.

Czy można używać Lerna z Nx?

Tak, Lerna i Nx mogą być używane razem. Ta kombinacja pozwala na wykorzystanie możliwości zarządzania pakietami Lerna, jednocześnie korzystając z zoptymalizowanego systemu kompilacji i orkiestracji zadań Nx. Nx można skonfigurować jako runner zadań dla Lerna, zapewniając inkrementalne kompilacje i cachowanie obliczeń dla pakietów zarządzanych przez Lerna.

Najlepsze Praktyki Zarządzania Frontend Monorepo

Niezależnie od tego, czy wybierzesz Lerna, czy Nx, przestrzeganie najlepszych praktyk jest kluczowe dla pomyślnego zarządzania frontendowym monorepo:

• Ustanów jasną strukturę projektu: Organizuj swoje projekty logicznie i spójnie. Używaj jasnej konwencji nazewnictwa dla pakietów i bibliotek.
• Wymuszaj spójne standardy kodowania: Używaj linterów i formatterów, aby zapewnić spójny styl kodu we wszystkich projektach. Narzędzia takie jak ESLint i Prettier można zintegrować z przepływem pracy.
• Automatyzuj procesy kompilacji i testowania: Używaj potoków CI/CD do automatyzacji procesów kompilacji, testowania i wdrażania. Można użyć narzędzi takich jak Jenkins, CircleCI i GitHub Actions.
• Wdrażaj przeglądy kodu: Przeprowadzaj dokładne przeglądy kodu, aby zapewnić jakość kodu i łatwość jego utrzymania. Używaj pull requestów i narzędzi do przeglądu kodu.
• Monitoruj czasy kompilacji i wydajność: Śledź czasy kompilacji i metryki wydajności, aby identyfikować wąskie gardła i obszary do poprawy. Nx zapewnia narzędzia do analizy wydajności kompilacji.
• Dokumentuj swoją strukturę monorepo i procesy: Twórz jasną dokumentację wyjaśniającą strukturę Twojego monorepo, używane narzędzia i technologie oraz przepływy pracy deweloperskie.
• Przyjmij Konwencjonalne Commity: Używaj konwencjonalnych commitów do automatyzacji procesów wersjonowania i wydawania. Lerna obsługuje konwencjonalne commity "out of the box".

Wniosek

Frontendowe monorepo oferują znaczące korzyści w zarządzaniu dużymi i złożonymi projektami, w tym współdzielenie kodu, uproszczone zarządzanie zależnościami i lepszą współpracę. Lerna i Nx to potężne narzędzia, które mogą pomóc w efektywnym zarządzaniu frontendowym monorepo. Lerna jest doskonałym wyborem do zarządzania pakietami npm, podczas gdy Nx zapewnia bardziej kompleksowy system kompilacji z zaawansowanymi funkcjami, takimi jak inkrementalne kompilacje i generowanie kodu. Starannie rozważając potrzeby swojego projektu i przestrzegając najlepszych praktyk, możesz skutecznie przyjąć frontendowe monorepo i czerpać z niego korzyści.

Pamiętaj, aby wziąć pod uwagę takie czynniki, jak doświadczenie Twojego zespołu, złożoność projektu i wymagania dotyczące wydajności, przy wyborze między Lerna a Nx. Eksperymentuj z oboma narzędziami i znajdź to, które najlepiej odpowiada Twoim konkretnym potrzebom.

Powodzenia w Twojej monorepo podróży!